$(function () {
  // 循环渲染内容
  // time 停止的条件 renderSite 渲染的地方  renderContent 渲染的内容 要显示索引值必须是xx才可以变
  // let inexistence = $('inexistence')
  function renderLoop(time, renderSite, renderContent) {
    let arr = []
    let arr1 = []

    for (num = 0; num <= time; num++) {
      arr.push(num)
    }
    for (let i = 0; ; i++) {
      if (i > time) {
        break
      }
      arr1.push(renderContent)

      // 查看renderContent 中有没有xx有就变成 `${arr[i]+1}`
      renderContent1 = (renderContent + '').replace(/xx/g, `${arr[i] + 1}`)
      renderSite.append(renderContent1)
    }
    return arr1
  }

  let l = `
<li class="cloneCommodityClassificationTitle">
  <p>
    <a href="#">图书</a><span>、</span>
    <a href="#">电子书</a><span>、</span>
    <a href="#">童书xx</a>
  </p>
  <dl>
    <dt>文艺xx</dt>
    <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>
    <dt>文艺</dt>
    <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>
    <dt>文艺</dt>
    <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>
  </dl>
</li>
`

  let RenderingRecommend = `
<tr class="fl">
  <td class="recommend-commodity">
   <img src="./img/index06_05.jpg" alt="">
   <p class="recommend-time-limit">限时抢
    <span class="triangle"></span>
   </p>
    <p class="recommend-message">黑爵青蜂侠六键电竞游戏鼠标</p>
    <p class="recommend-guarantee">全国联保 一年免费包换</p>
    <p class="recommend-price">￥:299</p>
  </td>
</tr>
`

  let booksSynopsis = `
  <div class="books-synopsis">
    <span class="books-quantity">xx</span>
    <p>就喜欢你看不惯我 又干不</p>
    <div class="show">
      <img src="./img/index08_05.jpg" alt="">
      <span>从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐，1500万次转发，超4亿次阅读</span>
    </div>
  </div>
  `

  let dd = `
  <li>
  <img src="./img/index25_12.jpg" alt="">
  <p class="promotion-synopsis">Pigeon法国制奶嘴，无毒天然乳胶</p>
  <p class="promotion-price">￥:189</p>
  <p class="promotion-evaluate"> <span class="iconfont icon-xiaoxi"></span>已有<span>988</span>条评价</p>
  </li>
`

  let booksTable = `
  <table>
    <tr>
      <td colspan="2">
    <!--轮播开始-->
      <div class="goods-category-banner pptbox bannerInner2">
      <!--轮播的内容-->
      <ul class="innerwrapper">
        <li>
          <a href="#"><img src="./img/banner01.jpg" /></a>
        </li>
        <li>
          <a href="#"><img src="./img/banner02.jpg" /></a>
        </li>
        <li>
          <a href="#"><img src="./img/banner03.jpg" /></a>
        </li>
        <li>
          <a href="#"><img src="./img/banner04.jpg" /></a>
        </li>
        <li>
          <a href="#"><img src="./img/banner05.jpg" /></a>
        </li>
      </ul>
      <!--数字控制器-->
      <ul class="pagination controls">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <!--按钮控制器-->
      <span class="btnleft"></span>
      <span class="btnright"></span>
    </div>
  </td>
  <td class="books-img">
    <h3>奥运狂欢xx</h3>
    <p>10万种电子书 直降40%</p>
    <p><img src="./img/index09_05.jpg" alt=""></p>
    <p><span>￥ 49</span><span>￥ 79</span></p>
  </td>
  <td class="books-img">
    <h3>奥运狂欢</h3>
    <p>10万种电子书 直降40%</p>
    <p><img src="./img/index09_05.jpg" alt=""></p>
    <p><span>￥ 49</span><span>￥ 79</span></p>
  </td>
</tr>
<tr>
  <td class="books-img">
    <h3>奥运狂欢</h3>
    <p>10万种电子书 直降40%</p>
    <p><img src="./img/index09_05.jpg" alt=""></p>
    <p><span>￥ 49</span><span>￥ 79</span></p>
  </td>
  <td class="books-img">
    <h3>奥运狂欢</h3>
    <p>10万种电子书 直降40%</p>
    <p><img src="./img/index09_05.jpg" alt=""></p>
    <p><span>￥ 49</span><span>￥ 79</span></p>
  </td>
  <td class="books-img">
    <h3>奥运狂欢</h3>
    <p>10万种电子书 直降40%</p>
    <p><img src="./img/index09_05.jpg" alt=""></p>
    <p><span>￥ 49</span><span>￥ 79</span></p>
  </td>
  <td class="books-img">
    <h3>奥运狂欢</h3>
    <p>10万种电子书 直降40%</p>
    <p><img src="./img/index09_05.jpg" alt=""></p>
    <p><span>￥ 49</span><span>￥ 79</span></p>
  </td>
  </tr>
</table>
`

  // 循环渲染商品分类
  renderLoop(9, $('#goodsCategory .content'), l)
  // 乐购·今日推荐
  renderLoop(9, $('#dailyRecommendation .content'), RenderingRecommend)
  // 图书电子书
  renderLoop(2, $('#books .content1'), booksTable)
  // 循环渲染新书畅销榜
  renderLoop(7, $('#books .content2'), booksSynopsis)
  // 第一次循环渲染推广商品内容li
  renderLoop(4, $('#promotionOfGoods .content'), dd)
  // 克隆渲染推广商品内容ul
  $('.promotion-content').append($('.promotion-content ul').clone())
  // 克隆渲染推广商品内容
  $('#promotionOfGoods .content2').append($('.promotion-content').clone())

  // 手风琴
  // site 要执行手风琴的对象 show要显示与隐藏的对象 其他兄弟elsehinde index 到一个值显示与隐藏border-bottom lastTag border-bottom 显示的标签
  function accordion(site, show, elsehinde, index, lastTag) {
    site.click(function () {
      $(this).find(show).show()
      if ($(this).index() === index) {
        $(this).find(lastTag).css('border-bottom', '1px solid #ccc')
      } else {
        $(this).closest('.content2').find('>div:last-child p').css('border-bottom', '')
      }
      $(this).siblings(elsehinde).find(show).hide()
    })
  }
  // 新书畅销榜手风琴
  accordion($('.books-synopsis'), '.show', '.books-synopsis', 7, 'p')
  // 最新上架 独家畅 销电子书 激活
  $('.repetitio').on('click', '.title-rigth div', function () {
    $(this).addClass('on')
    $(this).siblings('div').removeClass('on')
    $(this)
      .closest('.repetitio')
      .find('.shower')
      .find(`div:eq(${$(this).index()})`)
      .show()
    $(this)
      .closest('.repetitio')
      .find('.shower')
      .find(`div:eq(${$(this).index()})`)
      .siblings('div')
      .hide()
  })

  $('.books').on('click', '.books-rigth div', function () {
    $(this).addClass('on')
    $(this).siblings('div').removeClass('on')
    $(this)
      .closest('.books')
      .find('.shower')
      .find(`table:eq(${$(this).index()})`)
      .show()
    console.log(1)
    $(this)
      .closest('.books')
      .find('.shower')
      .find(`table:eq(${$(this).index()})`)
      .siblings('table')
      .hide()
    console.log(2)
  })

  //  推广商品
  $('#promotionOfGoods').on('click', 'p', function () {
    $(this).addClass('on')
    $(this).siblings('p').removeClass('on')
    $(this)
      .closest('#promotionOfGoods')
      .find(`.show-hidden:eq(${$(this).index()})`)
      .show()
    console.log(1)
    $(this)
      .closest('#promotionOfGoods')
      .find(`.show-hidden:eq(${$(this).index()})`)
      .siblings('div')
      .hide()
    console.log(2)
  })

  /* 循环渲染重复 time是要渲染的次数 */
  function cycleRepetitio(time) {
    let arrcc = []
    for (cc = 0; cc < time; cc++) {
      arrcc.push($('.repetitio').clone(true))
    }
    arrcc[time - 2].appendTo('.Childrens-wear')
    arrcc[time - 1].appendTo('.Childrens-wear')
    $('.Childrens-wear').find('repetitio').addClass('Kids')
  }
  /* 循环童装童鞋婴儿装,户外运动  */
  cycleRepetitio(2)

  // 轮播图
  function banner(bannerInner, boxh, w, h) {
    $(bannerInner).tyslide({
      boxh, //盒子的高度
      w, //盒子的宽度
      h, //图片的高度
      isShow: true, //是否显示控制器
      isShowBtn: true, //是否显示左右按钮
      controltop: 40, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
      controlsW: 14, //控制按钮宽度
      controlsH: 2, //控制按钮高度
      radius: 5, //控制按钮圆角度数
      controlsColor: '#d7d7d7', //普通控制按钮的颜色
      controlsCurrentColor: '#ff6600', //当前控制按钮的颜色
      isShowNum: true //是否显示数字
    })
  }

  // 服装 户外运动 童装轮播图
  banner($('.bannerInner3'), 340, 430, 340)
  // 主轮播图
  banner($('#bannerInner'), 460, 1200, 460)
  // 图书 电子书轮播图
  banner($('.bannerInner2'), 220, 336, 220)

  for (let g = 0; ; g++) {
    let gg = ['图书', '电子书', '原创文学', '服装', '运动户外', '孕婴童', '家居', '创意文具', '地方特产', '电器城']
    if (g > 9) {
      break
    }
    if (g === 3) {
      $('#head .nav .content').append(`<a href="./product_list .html">${gg[g]}</a>`)
    }
    $('#head .nav .content').append(`<a href="#">${gg[g]}</a>`)
  }

  // 描点链接
  $('.floor li')
    .hover(
      function () {
        let bgcolor = $(this).data('bgc')
        $(this).css({
          backgroundColor: bgcolor,
          backgroundPositionX: -40,
          width: 80
        })
      },
      function () {
        $(this).css({
          backgroundColor: '',
          backgroundPositionX: 0,
          width: 40
        })
      }
    )
    .on('click', function () {
      //获取当前floor下Li的索引值
      let index = $(this).index()
      let sTop = $('.floor-box').eq(index).offset().top
      $('html, body').animate({ scrollTop: sTop }, 300)
    })

  // 回到顶部
  $(window).on('scroll', function () {
    if ($('html, body').scrollTop() > 700) {
      $('.search').appendTo('.fix-top')
      $('.tophead').show()
      $('.fix-top').show()
      $('.search input').css({
        left: 500,
        top: 5
      })
      $('.search .search-btn').css({
        left: 906,
        top: 5
      })
    } else {
      $('.fix-top').hide()
      $('.tophead').hide()
      $('.search').appendTo('.shop')
      $('.search input').css({
        left: -476,
        top: 0
      })
      $('.search .search-btn').css({
        left: -72,
        top: 2
      })
    }
  })
  $('.tophead').click(function () {
    $('html, body').animate({ scrollTop: 0 }, 300)
  })

  // 要改变的内容
  let repetitio = $('.Childrens-wear .repetitio')
  repetitio.each(function (index) {
    if (index === 0) {
      $(this).find('h2').html('户外运动').closest('.repetitio').find('.left img').attr('src', './img/index5_01.jpg').closest('.repetitio').find('.shower img').attr('src', './img/index5_02.jpg')
    } else if (index === 1) {
      $(this)
        .find('h2')
        .html('童装 童鞋 婴儿装')
        .closest('.repetitio')
        .find('.left img')
        .attr('src', './img/index5_03.jpg')
        .closest('.repetitio')
        .find('.shower img')
        .attr('src', './img/index5_04.jpg')
    }
  })

  $('#promotionOfGoods .content2').find('.promotion-price').html('￥:99')
  console.log(255)
})
